<template>
  <van-nav-bar left-text="返回" left-arrow fixed @click="handleBack" />

  <van-sticky :offset-top="45">
    <div class="header">
      <!-- <van-field
        :model-value="searchInfo"
        placeholder="请点击筛选"
        is-link
        readonly
        name="picker"
        label="筛选"
        @click="picker = true"
      /> -->

      <!-- <SearchPopup
        v-model:show="picker"
        v-model:project="project"
        v-model:yearly="yearly"
        v-model:term="term"
        v-model:half="half"
      ></SearchPopup> -->
    </div>
  </van-sticky>

  <div v-if="loading" class="container">
    <BoardHeader></BoardHeader>

    <PsychologicalSecurity
      :num-data="numData"
      :total-data="totalData"
    ></PsychologicalSecurity>

    <EvaluationStatus
      :num-data="numData"
      :total-data="totalData"
    ></EvaluationStatus>

    <ChartPsychologicalSafetyWarning
      :num-data="numData"
      :total-data="totalData"
    ></ChartPsychologicalSafetyWarning>

    <ChartPsychologicalSafetyWarning2
      :num-data="numData"
      :total-data="totalData"
    ></ChartPsychologicalSafetyWarning2>

    <ChartSex :num-data="numData" :total-data="totalData"></ChartSex>
    <!-- <ChartWaringType
      :num-data="numData"
      :total-data="totalData"
    ></ChartWaringType> -->

    <ChartGradeWarning
      v-if="!isEnterprise"
      :num-data="numData"
      :total-data="totalData"
    ></ChartGradeWarning>

    <!-- <EarlyPoliceDistribution
      :num-data="numData"
      :total-data="totalData"
    ></EarlyPoliceDistribution>
    <DistrictsIntervention
      :num-data="numData"
      :total-data="totalData"
    ></DistrictsIntervention> -->
    <!-- <PsychologicalCounselingTypeDistribution
      :num-data="numData"
      :total-data="totalData"
    ></PsychologicalCounselingTypeDistribution> -->
    <ChartEvaluationCompletionOverview
      :num-data="numData"
      :total-data="totalData"
    ></ChartEvaluationCompletionOverview>

    <ChartGradesNotTested
      v-if="!isEnterprise"
      :num-data="numData"
      :total-data="totalData"
    ></ChartGradesNotTested>

    <ChartEarlyWarningInterventionOverview
      :num-data="numData"
      :total-data="totalData"
    ></ChartEarlyWarningInterventionOverview>

    <ChartEarlyWarningInterventionAllGrades
      v-if="!isEnterprise"
      :num-data="numData"
      :total-data="totalData"
    ></ChartEarlyWarningInterventionAllGrades>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, computed, watch } from 'vue'
import { useBack } from '/@/use/useRouteBack'
import PsychologicalSecurity from './components/PsychologicalSecurity.vue'
import EvaluationStatus from './components/EvaluationStatus.vue'
import EarlyPoliceDistribution from './components/EarlyPoliceDistribution.vue'
import DistrictsIntervention from './components/DistrictsIntervention.vue'
import PsychologicalCounselingTypeDistribution from './components/PsychologicalCounselingTypeDistribution.vue'
import ChartSex from './components/ChartSex.vue'
import ChartWaringType from './components/ChartWaringType.vue'
import ChartGradeWarning from './components/ChartGradeWarning.vue'
import ChartGradesNotTested from './components/ChartGradesNotTested.vue'
import ChartPsychologicalSafetyWarning from './components/ChartPsychologicalSafetyWarning.vue'
import ChartPsychologicalSafetyWarning2 from './components/ChartPsychologicalSafetyWarning2.vue'
import ProjectPicker from './components/ProjectPicker.vue'
import { Project } from '/@/types/Project'
import { useBoarData } from './use/useBoarData'
import { useLoginer } from '/@/use/loginer'
import ChartEvaluationCompletionOverview from './components/ChartEvaluationCompletionOverview.vue'
import ChartEarlyWarningInterventionOverview from './components/ChartEarlyWarningInterventionOverview.vue'
import ChartEarlyWarningInterventionAllGrades from './components/ChartEarlyWarningInterventionAllGrades.vue'
import BoardHeader from './components/BoardHeader.vue'
import SearchPopup from './search-popup.vue'
import { Term } from '/@/types/Term'
import { Half } from '/@/types/Half'
import 'echarts'
import ECharts from 'vue-echarts'
import { useStore } from '/@/store'

const props = defineProps({})

const { state } = useStore()

const { back: handleBack } = useBack()

const { picker, project } = useProject()

const { loginer } = useLoginer()

// const loading = ref(false)

function useProject() {
  const picker = ref(false)
  const project = ref<Project | null>(null)

  return {
    picker,
    project,
  }
}

const usrInfo = JSON.parse(localStorage.getItem('fock_user_data')!)

const isEnterprise = computed(() => {
  return state.enterprise.includes(usrInfo.tenantId)
})

const yearly = ref('')

const term = ref<Term | null>(null)

const half = ref<Half | null>(null)

const searchInfo = computed(() => {
  const list = [yearly.value, half.value, term.value?.term].filter(Boolean)

  return list.join(' | ')
})

const { numData, totalData, loading } = useBoarData({
  project,
  yearly,
  half,
  term,
})

// watch(
//   () => numData,
//   (val) => {
//     console.log(val)
//     loading.value = true
//   }
// )
</script>

<style scoped lang="less">
.container {
  padding-top: 40px;
  margin-bottom: 60px;
}
</style>
